
img {
  max-width: 100%;
}


.ui-big-images {

  overflow: hidden;
  display: flex;
}

.ui-big-image {
  width: 100%;
  margin-right: -100%;
}
.ui-big-image img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center 20%;
     object-position: center 20%;
  width: 100%;
  height: 100%;
  display: block;
}
@media (max-height: 600px) {
  .ui-big-image img {
    -o-object-position: center center;
       object-position: center center;
  }
}

.ui-thumbnails {
  background-color: #ffffff;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 0px 20px;
    border-bottom: 1px solid #f5f5f5;
}

.ui-thumbnail {
  display: block;
  cursor: pointer;
}

.ui-cuticle {
  background-color: #990000;
  bottom: 0;
  height: .25rem;
  width: 100%;
}

.ui-thumbnail > img {
  width: auto;
}

.ui-content {
    text-align: center;
    background-color:rgb(0 0 0 / 36%);
    z-index: 1;
    position: absolute;
    top: -90px;
    width: 100%;
}



    
    

.ui-articles {
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.ui-article {
  padding: 30px 30px;
  width: 100%;
  margin-right: -100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ui-archive{color:#fff !important;}

.ui-paragraph {
  margin: 0;
  font-size: .7rem;
  line-height: 1.7;
}

.ui-nav {
  position: absolute;
  left:44%;
  bottom: 100%;
}
.ui-nav button {
  background: #cb0303;
  border: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: .5em;
  width: 7em;
  color: #FFF;
  font-family: monospace;
  transition: inherit;
  transition-duration: 300ms;
}
.ui-nav button:hover, .ui-nav button:focus {
  background: #990000;
  outline: none;
}
.ui-nav button:active {
  outline: none;
  -webkit-transform: translateY(0.25em);
          transform: translateY(0.25em);
  transition-duration: 100ms;
}

.ui-heading {
    margin: 0;
    margin-bottom: 0px;
    font-size: 24px;
    font-weight: normal;
    color: white;
}

}


.ui-heading{
    
    font-size: 20px;
}





/* ---------------------------------- */
.ui-big-image {
  opacity: 0;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}


.ui-big-image[data-active] ~ .ui-big-image {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}

.ui-big-image[data-active] {
  opacity: 1;
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}


/* ---------------------------------- */
.ui-article {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
.ui-article:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #990000;
  opacity: 1;
  transition-duration: 0.35s;
  z-index: 1;
}

.ui-article[data-active] ~ .ui-article {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}

.ui-article[data-active] {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}
.ui-article[data-active]:before {
  opacity: 0;
}

/* ---------------------------------- */
.ui-thumbnail > img {
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
  transition-duration: 0.35s;
  padding: 5px 5px;
}
.ui-thumbnail:active > img {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
  transition-duration: 100ms;
}
.ui-thumbnail:focus {
  outline: none;
}

.ui-cuticle {
  display: none;
}

.ui-thumbnail[data-active] > img, .ui-thumbnail:hover > img {
  -webkit-filter: grayscale(0%);
          filter: grayscale(0%);
}
.ui-thumbnail[data-active] .ui-cuticle {
  display: block;
}


.ui-article{display:none;margin-right:0;}
    .ui-article[data-active]{display:block;}
    .ui-article[data-active]:before{display:none;}
    .ui-cuticle{background-color:#cb0303;}
    .ui-bottom{position:absolute;bottom:0;left:0;width:100%;z-index:4;}
    *, *:before, *:after {
      box-sizing: border-box;
      position: relative;
      transition-property: opacity, -webkit-transform, -webkit-filter;
      transition-property: transform, opacity, filter;
      transition-property: transform, opacity, filter, -webkit-transform, -webkit-filter;
      transition-duration: 0.7s, 0.7s, 0.7s;
      transition-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
    }

.afterinlineblock:after, .beforeinlineblock:before, .inlineblock { display: inline-block; }
.beforecontent:before, .aftercontent:after { content: ''; }
.afterdisblock:after, .beforedisblock:before, .disblock { display: block; }
.afterdisnone:before, .beforedisnone:before, .disnone { display: none; }
.margin0auto { margin: 0 auto; }
.widthauto { width: auto; }
.widthauto-important { width: auto !important; }
.beforewidth_100:before, .afterwidth_100:after, .width_100 { width: 100%; }
.minwidth_100 { min-width: 100%; }
.maxwidth_100 { max-width: 100%; }
.width_100-important { width: 100% !important; }
.minheight100 { min-height: 100%; }
.maxheight100 { max-height: 100%; }
.beforeheight_100:before,.afterheight_100:after,.height_100 { height: 100%; }
.height_100vh { height: 100vh; }
.minheight_100vh { min-height: 100vh; }
.height_auto { height: auto; }
.height_100-important { height: 100% !important; }
.white { color: #fff; }
.white_im { color: #fff !important; }
.bg_white { background-color: #fff; }
.bg_black_25 { background-color: rgba(0, 0, 0, 0.25) !important; transition: .4s; }
.over_hide { overflow: hidden; }
.overflow-y { overflow-y: auto; }
.notextshadow { text-shadow: none; }
.po_fixed { position: fixed; }
.beforepo_absolute:before, .afterpo_absolute:after, .po_absolute { position: absolute; }
.beforetop0:before, .aftertop0:after, .top0 { top: 0; }
.beforeright0:before, .afterright0:after, .right0 { right: 0; }
.beforebottom0:before, .afterbottom0:after, .bottom0 { bottom: 0; }
.beforeleft0:before, .afterleft0:after, .left0 { left: 0; }
.beforeleft_50:before, .afterleft_50:after, .left_50 { left: 50%; }
.beforetop_50:before, .aftertop_50:after, .top_50 { top: 50%; }
.top_100{top:100%;}
.normal { font-style: normal; }
.red { color: red; }
li { list-style-type: none; }
.line_height_1 { line-height: 1.1; }
.hover_cursor { cursor: pointer; }
.hover_no_drop { cursor: no-drop; }
.hover-color:hover { color: #ce0b3f; }
input, button, a, .btn { outline: 0 none !important; outline: none !important; blr: expression(this.onFocus=this.blur()); }
.font16 { font-size: 16px; }
.line1_8 { line-height: 1.8; }
.aftertransition_3:after, .beforetransition_3:before, .transition_3 { transition: .3s; }
.nowrap { white-space: nowrap; }
.bottommargin-10 { margin-bottom: 10px; }
.z-index2 { z-index: 2; }

/* ============================================================
   flex：定义布局为盒模型
   flex-v：盒模型垂直布局
   flex-1：子元素占据剩余的空间
   flex-middle：子元素垂直居中
   flex-center：子元素水平居中
   flex-justify：子元素两端对齐
   兼容性：ios 4+、android 2.3+、winphone8+
   flex-wrap：让弹性盒元素在必要的时候拆行
   ============================================================ */
.flex-row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
.flex-v { -webkit-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; }
.flex-1 { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; }
.flex-middle { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; }
.flex-stretch { -webkit-align-items: stretch; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
.flex-bottom { align-items: flex-end; }
.flex-top { align-items: flex-start; }
.flex-justifyend { justify-content: flex-end; }
.flex-center { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; }
.flex-justify { -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; -webkit-flex-wrap: wrap; /* Safari 6.1+ */ }
.line_clamp_1 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.line_clamp_2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.line_clamp_3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.line_clamp_4 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.line_clamp_5 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
.beforexy-transform:before, .afterxy-transform:after, .xy-transform { -o-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.beforex-transform:before, .afterx-transform:after, .x-transform { -o-transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }
.beforey-transform:before, .aftery-transform:after, .y-transform { -o-transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateX(-50%); transform: translateY(-50%); }



/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

.slick-prev{display: inline-block;
    position: absolute;
    z-index: 100000;
    top: 50%;
    padding: 14px;
    background-color: rgb(255 255 255 / 9%);
    left: 0;
        color: white;
    border: 1px solid #fff;
    cursor: pointer;
}


 .slick-next{display: inline-block;
    position: absolute;
    z-index: 100000;
    top: 50%;
    padding: 14px;
    background-color: rgb(255 255 255 / 9%);
    
    right: 0;
        color: white;
   border: 1px solid #fff;
   cursor: pointer;
     
     
 }





/*slider*/




@media (min-width: 992px) {
  .slider,
  .slide {
    height: 95vh;
  }
}
.slide {
  position: relative;
}
.slide .slide__img {
  width: 100%;
  height: auto;
  overflow: hidden;
}
@media (min-width: 992px) {
  .slide .slide__img {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
}
.slide .slide__img img {
  max-width: 100%;
  height: auto;
  opacity: 1 !important;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  transition: all 1s ease;
  width: 100%;
}
.slide .slide__content {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.slide .slide__content--headings {
  text-align: center;
  color: #FFF;
}
.slide .slide__content--headings h2 {
  font-size:20px;
  margin: 10px 0;
  background-color: rgb(0 0 0 / 47%);
  padding: 5px 30px;
}
.slide .slide__content--headings .animated {
  transition: all 0.5s ease;
}
.slider [data-animation-in] {
  opacity: 0;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  transition: opacity 0.5s ease 0.3s;
}
.slick-dotted .slick-slider {
  margin-bottom: 30px;
}
.slick-dots {
  position: absolute;
  bottom: 25px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100%;
}
.slick-dots li {
  position: relative;
  display: inline-block;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}
.slick-dots li button {
  border: 0;
  display: block;
  outline: none;
  line-height: 0px;
  font-size: 0px;
  color: transparent;
  padding: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.slick-dots li button:hover,
.slick-dots li button:focus {
  outline: none;
}
.simple-dots .slick-dots li {
  width: 20px;
  height: 20px;
}
.simple-dots .slick-dots li button {
  border-radius: 50%;
  background-color: white;
  opacity: 0.25;
  width: 20px;
  height: 20px;
}
.simple-dots .slick-dots li button:hover,
.simple-dots .slick-dots li button:focus {
  opacity: 1;
}
.simple-dots .slick-dots li.slick-active button {
  color: white;
  opacity: 0.75;
}
.stick-dots .slick-dots li {
  height: 3px;
  width: 50px;
}
.stick-dots .slick-dots li button {
  position: relative;
  background-color: #cb0303;
  opacity: 0.25;
  width: 50px;
  height: 3px;
  padding: 0;
}
.stick-dots .slick-dots li button:hover,
.stick-dots .slick-dots li button:focus {
  opacity: 1;
}
.stick-dots .slick-dots li.slick-active button {
  color: white;
  opacity: 0.75;
}
.stick-dots .slick-dots li.slick-active button:hover,
.stick-dots .slick-dots li.slick-active button:focus {
  opacity: 1;
}
/* /////////// IMAGE ZOOM /////////// */
@-webkit-keyframes zoomInImage {
  from {
    transform: scale3d(1, 1, 1);
  }
  to {
    transform: scale3d(1.1, 1.1, 1.1);
  }
}
@keyframes zoomInImage {
  from {
    transform: scale3d(1, 1, 1);
  }
  to {
    transform: scale3d(1.1, 1.1, 1.1);
  }
}
.zoomInImage {
  -webkit-animation-name: zoomInImage;
          animation-name: zoomInImage;
}
@-webkit-keyframes zoomOutImage {
  from {
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}
@keyframes zoomOutImage {
  from {
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}
.zoomOutImage {
  -webkit-animation-name: zoomOutImage;
          animation-name: zoomOutImage;
}





#header .menu ul > li > a{color:#fff;}
#header.compact .menu ul > li > a{color:#000;}
.index-body #header #logo .logol,
.index-body #header.compact #logo .logo2{display:block !important;}
.index-body #header #logo .logo2,
.index-body #header.compact #logo .logol{display:none !important;}

.slider, .slide{height:auto;}
.slider.bigbanner .slick-list,
.slider.bigbanner .slick-list .slick-track,
.slider.bigbanner .slick-list .slick-track .slide{height:100%;}
.ui-thumbnail[data-active] .ui-cuticle{display:none;}
.ui-thumbnail.slick-current .ui-cuticle{display:block;}
.ui-thumbnail.slick-current > img{
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}
.ui-thumbnail[data-active] > img{
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

@media(max-width:767px){
    .index-body #header #logo .logo2{display:block !important;}
    .index-body #header #logo .logol{display:none !important;}
}


@media(min-width:1600px){
    .ui-thumbnail > img {
  padding: 10px 20px;
}

}



